<!--  -->
<template>
  <div>
    <span @click="show">
      <slot></slot>
    </span>
    <a-modal
      width="640px"
      :title="$t('all.autotext1421')"
      :visible="viewFileVisible"
      :footer="null"
      @cancel="viewFileVisible = false"
    >
      <!--      <div class="title">-->
      <!--        <span class="index title-index">序号</span>-->
      <!--        <span>文件名</span>-->
      <!--      </div>-->
      <div class="pdf" v-if="pdfData.length">
        <div v-for="(item, index) in pdfData" :key="item.fileUrl">
          <span class="index">{{ index + 1 }}</span>
          <!-- <a target="_blank" :href="item.fileUrl | dealImageUrl">{{ item.fileName }}</a> -->
          <a @click="clickViewPDF(item)">{{ item.fileName }}</a>
        </div>
      </div>
      <div class="image-container"  v-if="imgData.length">
        <div v-for="(item, index) in imgData" :key="item.fileUrl" class="itemWrapper">
          <div class="index">{{ pdfData.length ? (pdfData.length + index + 1) : index + 1 }}</div>
          <div class="content">
            <img src="../image/icon_pic.png"/>
            <a @click="clickView(item)">{{ item.fileName }}</a>
          </div>
        </div>
      </div>
      <a-modal
        :width="isShowPDF ? '640px' : '640px'"
        :visible="modalVisible"
        :footer="null"
        @cancel="modalVisible = false"
      >
        <div class="pdf" v-if="isShowPDF">
          <pdf
            ref="pdf"
            v-for="i in numPages"
            :key="i"
            :src="fileUrl"
            :page="i"
          ></pdf>
        </div>
        <div class="image" v-else>
          <img :src="itemFileUrl | dealImageUrl">
        </div>
      </a-modal>
      <pdfPreview :visible="pdfVisible" :url="fileUrl" @handleCancel="pdfVisible = false" />
    </a-modal>
  </div>
</template>

<script>
import pdf from 'vue-pdf-sign'
// 预览pdf用下面这个
import pdfPreview from '@/components/pdfPreview/index.vue'
export default {
  props: ['data'],
  components: {
    pdf,
    pdfPreview
  },
  data () {
    return {
      viewFileVisible: false,
      imgData: [],
      pdfData: [],
      itemFileUrl: '',
      modalVisible: false,
      numPages: null,
      isShowPDF: false,
      fileUrl: '',
      pdfVisible: false
    }
  },
  watch: {
    data: {
      immediate: true,
      handler () {
        this.handleData()
      }
    }
  },
  methods: {
    show () {
      this.viewFileVisible = true
    },
    // 处理数据
    handleData () {
      this.imgData = []
      this.pdfData = []
      const formatImg = /(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
      // const formatPdf = /(\.(pdf))$/i
      this.data.forEach(file => {
        if (formatImg.test(file.fileUrl)) {
          this.imgData.push(file)
        } else {
          this.pdfData.push(file)
        }
        // if (formatPdf.test(file.fileUrl)) {
        //   this.pdfData.push(file)
        // }
      })
    },
    // 点击查看图片
    clickView (item) {
      this.isShowPDF = false
      this.itemFileUrl = item.fileUrl
      this.modalVisible = true
    },
    // 预览pdf或下载其他格式文件
    clickViewPDF (item) {
      const formatPdf = /(pdf)$/i
      if (formatPdf.test(item.fileUrl)) {
        // this.isShowPDF = true
        // this.modalVisible = true
        this.pdfVisible = true
        const url = this.$options.filters.dealImageUrl(item.fileUrl)
        // this.getNumPages(url)
        this.fileUrl = url
      } else {
        const fileUrl = this.$options.filters.dealImageUrl(item.fileUrl)
        window.open(fileUrl, '_blank')
      }
    },
    getNumPages (url) {
      const loadingTask = pdf.createLoadingTask(url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
        this.initPage()
      }).catch(err => {
        console.error('pdf 加载失败', err)
        this.initPage()
      })
    },
    initPage () {
      // this.spinning = false
      this.$nextTick(() => {
        window.scrollTo(0, 0)
      }, 200)
    }
  }
}
</script>
<style scoped lang="less">
.ant-modal-body {
  padding: 8px 32px 32px 32px !important;
}
.title {
  padding: 5px;
  box-sizing: border-box;
  background: #F6F9FB;
  margin-bottom: 12px;
}
.index {
  width: 40px;
  /* padding-left: 10px; */
  /* margin-right: 30px; */
  border-right: 1px solid #D9D9D9;
  height: 66px;
  width: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-index {
  padding-left: 0;
}
.pdf {
  margin: 0 auto;
}
.pdf, .image-container {
  height: 66px;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  >div {
    display: flex;
    flex-direction: row;
    align-items: center;

    .content {
      margin-left: 8px;
      img {
        margin-right: 8px;
      }
    }
  }
  span {
    margin-right: 30px;
  }
  a {
    //color: #0F121B;
    &:hover {
      text-decoration: underline;
      color: #3D92FF;
    }
  }
}
.image {
  img {
    display: block;
    width: 80%;
    margin: 10px auto;
  }
}
</style>
